<template>
	<view class="container">
		<view class="container__head" v-if="countMsg">
			<view class="container__head-text">提示：</view>
			<view class="container__head-value" style="color: red;">{{countMsg}}</view>
		</view>
		<slot></slot>
		<view class="container__img">
			<view class="container__img--head">
				<view class="">图片</view>
				<u-icon name="photo" color="#aaa" size="30" @click="photo"></u-icon>
			</view>
			<view class="container__img--body" v-if="localImages.length">
				<view class="container__img--body-item" v-for="(item,index) in localImages" :key="item.img">
					<view class="container__img--body-item__close" @click="delImage(index)">
						<image src="@/static/theme/default/home/cha.png" mode=""></image>
					</view>
					<image :src="item.img" mode=""></image>
				</view>
			</view>
		</view>
		<view class="container__card--process" v-show="list.length">
			<view class="container__card--title">
				<view class="container__card--title-left">流程</view>
				<view class="container__card--title-right">
					<u-button text="默认流程" :color="current == 0 ? '#1890ff' : ''" :customStyle="{width: '140rpx',height: '60rpx'}" @click="changeDefaultSteps"></u-button>
					<u-button text="上次流程" :color="current == 1 ? '#1890ff' : ''" :customStyle="{width: '140rpx',height: '60rpx'}" @click="changeLastSteps" v-show="lastBtnVisible"></u-button>
				</view>
			</view>
			<view class="container__card--process-item" v-for="(item,index) in list" :key="item.StepNo">
				<view class="container__card--process-item__left">
					<view class="container__card--process-item__left--line" v-show="index != list.length-1"></view>
					<view class="container__card--process-item__left--content">
						<view class="container__card--process-item__left-content-title">{{item.role}}</view>
						<view class="container__card--process-item__left-content-des">{{item.users.length + '人' + item.desc}}</view>
					</view>
				</view>
				<view class="container__card--process-item__right">
					<view class="container__card--process-item__right-users">
						<view class="container__card--process-item__right-users-item" v-if="item.users.length > 2">
							<view class="container__card--process-item__right-users-item-box" @click="findMore(item.users,index)">
								<view class="" style="width: 80rpx;height: 80rpx;">
									<avator name="查看全部"></avator>
								</view>
								<view class="container__card--process-item__right-users-item-box-name">查看全部</view>
							</view>
						</view>
					</view>
					<view class="container__card--process-item__right-users" v-for="(v,i) in item.users" :key="v.pxid">
						<view class="container__card--process-item__right-users-item" v-if="i > item.users.length - 3">
							<view class="container__card--process-item__right-users-item-symbol" v-if="i != 0">></view>
							<view class="container__card--process-item__right-users-item-box">
								<view class="container__card--process-item__right-users-item-box-close" v-if="item.StepLock == '0' && v.UserLock == '0'" @click="delUser(v,item.users)">
									<image src="@/static/theme/default/home/cha.png" mode=""></image>
								</view>
								<view class="container__card--process-item__right-users-item-box-avator">
									<avator :avator="v.avator" :name="v.pname"></avator>
								</view>
								<view class="container__card--process-item__right-users-item-box-name">{{v.pname}}</view>
							</view>
						</view>
					</view>
					<view class="container__card--process-item__right-users-item-symbol" v-if="item.users.length && item.StepLock == '0'">></view>
					<view class="container__card--process-item__right-add" @click="goSelect(index)" v-if="item.StepLock == '0'">
						<view class="container__card--process-item__right-add-x" v-if="item.disabled">*</view>
						+
					</view>
				</view>
			</view>
		</view>
		
		<view class="container__footer">
			<u-button type="primary" color="#2979ff" :customStyle="{'border-radius': '20rpx'}" text="提交" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import Avator from '@/components/custom/avator/avator.vue'
	import {uploadImages,formatImg} from '@/common/custom_util.js'
	
	export default {
		components: {
			Avator
		},
		data() {
			return {
				obscode: _data.localData('obscode'),
				defaultFlowCode: _data.localData('obscode') + '-default',
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				static_avator: _data.data('static_url'),
				flowCode: '',
				list: [],
				countMsg: '',
				localImages: [],
				lastBtnVisible: false,//上次流程按钮显示
				current: 0
			}
		},
		props: {
			typeCode: {
				type: String,
				default: '',
				required: true
			},
			brief: {//业务字段通过'|'拼接而成，提交流程时需要
				type: String,
				default: '',
				required: true
			},
			detail: {//业务描述
				type: String,
				default: '',
			},
			notEmpty: {//业务字段是否有空
				type: Boolean,
				default: false
			},
			disabled: {//业务校验
				type: Boolean,
				default: true
			},
			checkResult: {//业务校验结果
				type: String,
				default: '校验结果不通过'
			},
			apiname: {//校验接口的apiname
				type: String,
				default: '',
			},
			apiparam: {//校验接口的apiparam
				type: Object,
				default: () => {},
			},
			insflowid: {//修改或强制撤销时的流程实例id
				type: String,
				default: '',
			},
		},
		created() {
			let that = this;
			this.flowCode = this.obscode + '_' + this.typeCode;
			this.init();
		},
		mounted() {
			uni.$on('select-list',(v) => {
				for(let i=0;i<v.length;i++) {
					if(v[i].UserLock == '1') continue
					v[i].UserLock = v[i].lock ? '1' : '0';
				}
				let index = _data.localData('select-index');
				this.$set(this.list[index],'users',v)
				_data.localData('select-list',[]);
			})
		},
		destroyed() {
			uni.$off('select-list');
		},
		watch: {
			typeCode() {
				this.flowCode = this.obscode + '_' + this.typeCode;
				this.getFlowLeftCountMsg()
			}
		},
		methods: {
			init() {
				let that = this;
				this.getFlowStep(this.flowCode).then(res => {
					that.getFlowStepUser().then(result => {
						that.formatFlowStep(res,result)
					})
					that.getFlowLastInsStepUser().then(value => {
						if(value.length) that.lastBtnVisible = true
					})
				})
				this.getFlowLeftCountMsg();
				if(this.insflowid) this.getInsFlowUpLoadList();
			},
			/**
			 * 获取流程上传的图片文件
			 */
			getInsFlowUpLoadList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getInsFlowUpLoadList',
						apiparam: {
							insflowid: this.insflowid,
						},
						success(res) {
							if(!res.length) return
							that.localImages = res.map(item => {
								return {
									img: formatImg(item.FilePath),
									path: item.FilePath
								}
							})
						}
					})
				})
			},
			/**
			 * 跳转到选择页面
			 * @param {Object} i
			 */
			goSelect(i) {
				this.list[i].users.forEach(item => {
					item.lock = item.UserLock == '0' ? false : true
				})
				_data.localData('select-list',this.list[i].users);
				uni.navigateTo({
					url: '/pages/wait/add/select',
					success() {
						_data.localData('select-index',i)
					}
				})
			},
			/**
			 * 点击查看全部按钮
			 * @param {Object} v  当前users数组
			 * @param {Object} i  点钱users索引
			 */
			findMore(v,i) {
				uni.navigateTo({
					url: '/pages/home/child/add-attend-apply/more?data=' + JSON.stringify(v) + '&index=' + i
				})
			},
			/**
			 * 获取月度、年度已申请和剩余次数文字提示
			 */
			getFlowLeftCountMsg() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getFlowLeftCountMsg',
					apiparam: {
						flowcode: this.flowCode,
						obsusername: this.obsusername,
						pxid: this.pxid
					},
					success(res) {
						if(res.length) {
							that.countMsg = res[0].msg;
						}
					}
				})
			},
			/**
			 * 获取流程的审批环节
			 * @param {Object} typeCode obscode_type拼接
			 */
			getFlowStep(flowcode) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowStep',
						apiparam: {
							flowcode
						},
						success(res) {
							if(res.length == 0) {
								uni.showToast({
									title: '无流程数据，请联系管理员配置流程',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack()
								},2000)
							} else {
								resolve(res)
							}
						}
					})
				})
				
			},
			/**
			 * 获取流程的审批抄送人员
			 */
			getFlowStepUser() {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowStepUser',
						apiparam: {
							flowcode: this.flowCode
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 获取用户上一次流程实例的审批抄送人员
			 */
			getFlowLastInsStepUser() {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowLastInsStepUser',
						apiparam: {
							flowcode: this.flowCode,
							obsusername: this.obsusername,
							pxid: this.pxid
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 初始化前获取下发环节
			 */
			getFirstStepNo() {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFirstStepNo',
						apiparam: {
							flowcode: this.flowCode
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 初始化流程
			 * @param {Object} apiparam 接口参数
			 */
			procInitFlow(apiparam) {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procInitFlow',
						apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 初始化流程审批和抄送人员
			 * @param {Object} apiparam 接口参数
			 */
			addInsFlowUser(apiparam) {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'addInsFlowUser',
						code: 13,
						apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 格式化审批环节和人员的数据
			 * @param {Object} v1	审批数据
			 * @param {Object} v2	审批人员数据
			 */
			formatFlowStep(v1,v2) {
				let flowStep = v1;
				let flowStepUser = v2;
				let sp = [];
				let cs = [];
				flowStepUser.forEach(item => {
					item.pname = item.UserName;
					item.pxid = item.Pxid;
					item.avator = this.static_avator + "/static/photo/user/" + item.Pxid + "/70.jpg";
					if(item.type == '1') {//审批
						sp.push(item)
					}
					if(item.type == '2') {//抄送
						cs.push(item)
					}
				})
				flowStep.forEach(v => {
					v.role = v.StepName;
					v.desc = '依次审批'
					v.disabled = true
					v.users = []
					sp.forEach(item => {
						if(v.StepNo == item.StepNo) v.users.push(item)
					})
				})
				let csObj = {
					role: '抄送人',
					desc: '抄送',
					disabled: false,
					StepNo: '',
					users: cs,
					StepLock: '0'
				}
				this.list = [...flowStep,csObj];
			},
			/**
			 * 提交流程前校验业务
			 */
			checkPermit() {
				let that = this;
				return new Promise((resolve,reject) => {
					if(this.apiname) {
						_custom.getDataJava({
							apiname: this.apiname,
							apiparam: this.apiparam,
							success(res) {
								console.log(res)
								if(res.length) {
									if(res[0].code == 0) {
										resolve(res)
									} else {
										uni.showToast({
											title: res[0].msg,
											icon: 'none',
											duration: 2000
										})
									}
								}
							}
						})
					} else {
						resolve()
					}
				})
			},
			/**
			 * 点击提交按钮
			 */
			submit() {
				let that = this;
				let flag = false;
				this.list.forEach((item,index) => {
					if(index != this.list.length -1 && item.users.length == 0) {
						flag = true
					}
				})
				if(!this.notEmpty || flag) {
					uni.showToast({
						title: '*为必填项',
						icon: 'none'
					})
					return
				}
				if(this.disabled) {
					uni.showToast({
						title: this.checkResult,
						icon: 'none'
					})
					return
				}
				uni.showLoading()
				this.checkPermit().then(() => {
					return this.getFirstStepNo()
				}).then(res => {
					if(res.length) {
						let param = {
							flowcode: that.flowCode,
							obsusername: that.obsusername,
							pxid: that.pxid,
							flowbrief: that.brief,
							flowdetail: that.detail,
							tostepno: res[0].ToStepNo,
							tousername: that.list[0].users[0].pname,
							topxid: that.list[0].users[0].pxid
						}
						that.procInitFlow(param).then(r => {
							if(r.length && r[0].code == '0') {
								let p = [];
								that.list.forEach((item,index) => {
									item.users.forEach((v,i) => {
										p.push({
											"type": index == that.list.length - 1 ?  '2' : '1',//审批：1，抄送：2
											"obsusername": that.obsusername,
											"insflowid":  r[0].InsFlowId,
											"stepno":  item.StepNo,//步骤
											"username": v.pname,
											"pxid": v.pxid,
											"sorting": i + 1,//步骤中的顺序
										})
									})
								})
								console.log(p)
								that.addInsFlowUser(p).then(result => {
									uni.hideLoading()
									that.addInsFlowUpLoad(r[0].InsFlowId)
									that.$emit('confirm',{
										insflowid: r[0].InsFlowId,
										...r[0]
									})
									
								})
							} else {
								uni.hideLoading()
								uni.showToast({
									title: r[0].msg,
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: '初始化前获取下发失败',
							icon: 'none'
						})
					}
				})
				
			},
			/**
			 * 删除人员
			 * @param {Object} v  待删除人员
			 * @param {Object} arr  当前审批数组
			 */
			delUser(v,arr) {
				arr.forEach((item,index) => {
					if(item.pxid == v.pxid) arr.splice(index,1)
				})
			},
			/**
			 * 拍照
			 */
			photo() {
				let that = this;
				uploadImages({
					sourceType: ['camera','album']
				},res => {
					uni.hideLoading();
					that.localImages.push(...res)
				})
			},
			/**
			 * 上传图片
			 * @param {Object} v insflowid
			 */
			addInsFlowUpLoad(v) {
				this.localImages.map((item,index) => {
					return new Promise((resolve,reject) => {
						_custom.getDataJava({
							apiname: 'addInsFlowUpLoad',
							code: 13,
							apiparam: {
								insflowid: v,
								filepath: item.path,
								obsusername: this.obsusername,
								sorting: (index+1),
							},
							success() {
								resolve()
							},
							fail() {
								reject()
							}
						})
					})
				})
			},
			/**
			 * 删除图片
			 * @param {Object} i
			 */
			delImage(i) {
				this.localImages.splice(i,1)
			},
			/**
			 * 切换默认流程
			 */
			changeDefaultSteps() {
				this.current = 0;
				this.getFlowStep(this.flowCode).then(res => {
					this.getFlowStepUser().then(result => {
						this.formatFlowStep(res,result)
					})
				})
			},
			/**
			 * 切换上次流程
			 */
			changeLastSteps() {
				this.current = 1;
				this.getFlowStep(this.flowCode).then(res => {
					this.getFlowLastInsStepUser().then(value => {
						this.formatFlowStep(res,value)
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		
		&__head {
			background-color: #fff;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}
		
		&__img {
			background-color: #fff;
			
			&--head {
				height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
			}
			
			&--body {
				padding: 20rpx;
				display: flex;
				overflow-x: scroll;
				
				&-item {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					margin-right: 20rpx;
					flex-shrink: 0;
					
					image {
						width: 100%;
						height: 100%;
					}
					
					&__close {
						position: absolute;
						top: -15rpx;
						right: -15rpx;
						z-index: 9;
						width: 35rpx;
						height: 35rpx;
						background-color: #000;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						
						image {
							width: 50%;
							height: 50%;
						}
					}
				}
			}
		}
		
		&__card {
			padding: 20rpx 10rpx;
			margin: 0 20rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;
			
			&--title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				margin-bottom: 20rpx;
				
				&-left {
					font-size: 32rpx;
					font-weight: bold;
					padding-left: 0;
					line-height: 80rpx;
				}
				
				&-right {
					display: flex;
					align-items: center;
				}
			}
			
			&--process {
				margin-top: 20rpx;
				position: relative;
				padding: 0 40rpx;
				background-color: #fff;
				
				&-item {
					height: 140rpx;
					display: flex;
					justify-content: space-between;
					
					&__left {
						width: 200rpx;
						position: relative;
						height: 100%;
						left: 40rpx;
						
						&--line {
							position: absolute;
							left: -28rpx;
							top: 15rpx;
							width: 1rpx;
							height: 140rpx;
							background-color: #eee;
						}
						
						&-content {
							
							&-title {
								position: relative;
								
								&::before {
									content: '';
									display: block;
									position: absolute;
									left: -37rpx;
									top: 15rpx;
									width: 20rpx;
									height: 20rpx;
									background-color: #999;
									border-radius: 50%;
								}
							}
							
							&-des {
								font-size: 25rpx;
								color: #aaa;
							}
						}
					}
					
					&__right {
						height: 100%;
						display: flex;
						justify-content: flex-end;
						
						&-users {
							height: 100%;
							
							&-item {
								width: 100%;
								height: 100%;
								display: flex;
								
								&-box {
									position: relative;
									width: 100rpx;
									height: 100%;
									display: flex;
									flex-direction: column;
									align-items: center;
									
									&-close {
										position: absolute;
										top: -15rpx;
										right: -5rpx;
										z-index: 9;
										width: 40rpx;
										height: 40rpx;
										background-color: #000;
										border-radius: 50%;
										display: flex;
										justify-content: center;
										align-items: center;
										
										image {
											width: 50%;
											height: 50%;
										}
									}
									
									&-avator {
										width: 80rpx;
										height: 80rpx;
									}
									
									&-name {
										font-size: 26rpx;
										color: #aaa;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
								
								&-symbol {
									margin: 10rpx;
									color: #aaa;
									font-size: 30rpx;
								}
							}
						}
						
						&-add {
							width: 60rpx;
							height: 60rpx;
							font-size: 45rpx;
							color: #007AFF;
							border: 1rpx dashed #007AFF;
							text-align: center;
							line-height: 60rpx;
							border-radius: 10rpx;
							position: relative;
							margin-top: 10rpx;
							
							&-x {
								position: absolute;
								top: -5rpx;
								right: -18rpx;
								font-size: 40rpx;
								color: red;
								background-color: #fff;
								height: 30rpx;
								width: 40rpx;
								line-height: 30rpx;
							}
						}
					}
				}
			}
		}
		
		&__footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160rpx;
			z-index: 10;
			background-color: #eee;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
	
</style>
